<template>
  <div>
    <video src="../../public/littleStation/back3.mp4" class="bjimg" autoplay loop muted></video>
    <div class="fullColumn" >
        <div class="firstNavs">
          <li class="li1" ><strong style="color: black">WHY</strong></li>
          <ul>
            <li class="li2">开源</li>
            <li class="li2">协同</li>
          </ul>
        </div>
        <div class="firstNavs">
          <li class="li1"><strong><a href="#one" class="book1">BOOK</a></strong></li>
          <ul>
            <li class="li2">语言</li>
            <li class="li2">书籍</li>
          </ul>
        </div>
        <div class="firstNavs">
          <li class="li1"><strong style="color: black">About Us</strong></li>
          <ul>
            <li class="li2">兴趣</li>
            <li class="li2">成员</li>
          </ul>
        </div>
    </div>

    <div id="top">
      <h1>Computer</h1>
      <p> 编程导航|兴趣使然</p>
    </div>


    <div id="content">
      <div id="banner">
      </div>
      <div id="contentOne">
        <div class="word"><p> 一个人的力量终归渺小，好的编程资源环境需要大家的共同努力。和项目开源类似，而 “资源开源协同”，可提供人人皆可了解的编程资源导航平台，帮助大家发现优质编程资源。</p>
          <div><img class="why" src="../../public/littleStation/why1.jpg" alt=""></div>
        </div>
        <h2 id="one"></h2>
        <div class="tb">
          <table>
            <tr>
              <th class="one">语言</th>
              <th class="two">书籍</th>
            </tr>
            <tr>
              <th>Java</th>
              <td>●Java编程语言（第三版)------------------James Gosling(Java之父)<hr/>
                ●Java编程思想（第2版)---------------------------------hruce Eckel<hr/>
                ●Java编程思想（第3版)---------------------------------hruce Eckel<hr/>
                ●JAVA 2核心技术 卷I/II：基础知识（原书第7版）--Cay Horstmann<hr/>
                ●Effective Java中文版---------------------------------Joshua Bloch<hr/>
                ●精通Struts:基于MVC的Java Web设计与开发----------------孙卫琴<hr/>
                ●Java与模式-----------------------------------------------------阎宏<hr/>

              </td>
            </tr>
            <tr>
              <th>C++</th>
              <td>●.C++程序设计语言（特别版)-----Bjarne Stroustrup“C++之父”<hr/>
                ●.C++ Primer (第3版)中文版-------------------Stanley B.Lippman<hr/>
                ●.C++标准程序库—-----------------------------Nicolai M.Josuttis<hr/>
                ●.深度探索C++对象模型------------------------Stanley B.Lippman<hr/>
                ●.Effective C++中文版 2nd Editio--------------------Scott Meyers<hr/>
                ●.More Effective C++中文版-------------------------Scott Meyers<hr/>
                ●.C++编程思想（第2版） ------------------------------hruce Eckel<hr/>
                ●.C++程序设计-----------------------------------------------谭浩强<hr/>
                ●.C++ Primer Plus(第五版)中文版-------------------Stephen Prata<hr/>

              </td>
            </tr>
            <tr>
              <th>C#</th>
              <td>●C#程序设计--Charles Petzold“windows编程泰山北斗”<hr/>
                ●.NET框架程序设计（修订版)--------------Jeffrey Richter<hr/>
                ●c#Windows程序设计-------------------Charles Petzold<hr/>
                ●.NET程序设计技术内幕----------------------Jeff Prosise<hr/></td>
            </tr>
            <tr>
              <th>C</th>
              <td>●C程序设计语言（第2版·新版）--hrian W.Kernighan“C语言之父”<hr/>
                ●C Primer Plus中文版（第五版）--------------------Stephen Prata<hr/>
                ●C程序设计（第三版）---------------------------------------谭浩强<hr/>
                ●C语言大全（第四版）--------------------------HERBERT SCHILDT<hr/>
                ●C语言接口与实现：创建可重用软件的技术-----DAVID R.HANSON<hr/>
                ●C语言参考手册(原书第5版)--------------------Samuel P.Harbison<hr/>
                ●C程序设计教程-------------------------------H.M.Deitel/P.J.Deitel<hr/>
                ●C陷阱与缺陷---------------------------------------Andrew Koenig<hr/></td>
            </tr>
            <tr>
              <th>数据结构</th>
              <td>●数据结构 C++语言描述 ---- William Ford,William Topp 刘卫东 沈官林<hr/>
                ●数据结构算法与应用-C++语言描述》Sartej Sahni 汪诗林 孙晓东等机械工业出版社<hr/></td>
            </tr>
            <tr>
              <th>黑客</th>
              <td>●应用密码学(协议算法与C源程序-------------hruce Schneier<hr/>
                ●网络信息安全的真相-------------------------hruce Schneier<hr/>
                ●黑客大曝光：网络安全机密与解决方案--STUART MCCLURE<hr/>
                ●软件加密技术内幕-----------------------------------看雪学院<hr/>
                ●加密与解密——软件保护技术与完全解决方案-------看雪学院<hr/>
                ●加密与解密（第二版）-----------------------------------段钢<hr/></td>
            </tr>
            <tr>
              <th>软件工程</th>
              <td>●设计模式--可复用面向对象软件的基础<hr/>
                ●重构--------------改善既有代码的设计<hr/></td>
            </tr>
            <tr>
              <th>算法</th>
              <td>●计算机程序设计艺术----------Donald.E.Knuth<hr/>
                ●算法导论-----------------Thomas H. Cormen<hr/>
                ●离散数学及其应用----------Kenneth H.Rosen<hr/></td>
            </tr>
            <tr>
              <th>网络</th>
              <td>●计算机网络第四版中文版---------Andrew S.Tanenbaum<hr/>
                ●UNIX网络编程2卷本--------------------Richard Stevens<hr/>
                ●用TCP/IP进行网际互联----------------Douglas E. Comer<hr/>
                ●高级TCP/IP编程----------------------------Jon C. Snader<hr/></td>
            </tr>
            <tr>
              <th>汇编</th>
              <td>●Intel微处理器结构、编程与接口（第六版）---------Barry B. hrey<hr/>
                ●80*86、奔腾机汇编语言程序设计-------------------Barry B. hrey<hr/>
                ●Windows环境下32位汇编语言程序设计（第2版)----------罗云彬<hr/>
                ●IBM-PC汇编语言程序设计（第2版） --------------沈美明 温冬婵<hr/></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="h"></div>
      <div class="di">
        <p class="name"><strong style="color: black">成</strong></p>
        <p class="name"><strong style="color: black">员</strong></p>
      </div>
      <div class="fullColumn">
        <div id="footer"><strong>END</strong></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "littleStation",
  data() {
    return {
      activeIndex: '/littleStation'
    };
  }
}
</script>

<style scoped>

/* CSS Document */
* {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 24px;
  text-align: center;
  list-style: none;
  color: #ffffff;
}

#top, #banner, #content, #footer {
  width: 100%; /*设置所有模块的宽度为980px、居中显示*/
  margin: 0 auto;
}

h1 {
  font-size: 59px;
  padding-top: 40px;
}

#top {
  height: 150px;
  border-style: none;
  float: right;
}

#banner {
  height: 0;
}

#content {
  overflow: hidden;
}

#footer {
  height: 50px;
}


.word { /*why字体*/
  width: 100%;
  height: 200px;
  font-family: "楷体";
  font-size: 27px;
  text-indent: inherit;
  padding-top: 20px;
  border-style: solid;
}

.why { /*简易图*/
  height: 100px;
  width: 150px;
  padding-top: 20px;
}

/*设置通栏*/
.fullColumn {
  width: 100%;

  /*background: url("../../public/littleStation/p.png") no-repeat center center;*/
  border-bottom: solid 1px rgba(227, 222, 222, 1.00);
}
.firstNavs { /*下栏的悬停设置*/
  margin:0;
  width: auto;
  float: left;
}

.firstNavs ul {
  overflow: hidden;
  height: 0px;
}

.firstNavs:hover ul {
  height: 120px;
  display: block;
  transition: all 1.5s;

}

.firstNavs li {
  font-size: 20px;
  line-height: 40px;
  background: #B8ACD6;
  border: solid 1px;
  color: black;
}

#contentOne {
  display: inline-block;
  border-bottom: solid 1px rgba(227, 222, 222, 1.00);
  margin: 10px auto;
  overflow: hidden;
}

.new_box img {
  height: 196px;

}

.new_box p {
  text-align: left;
  font-size: 18px;
}

table {
  position: relative;
  left: 10%;
  border: #E5EEF7;
  border-collapse: collapse;
}

th, td {
  border: 4px solid #CAD2E9;
  padding: 50px;
  margin: 50px;
}

.one {
  width: 50px;
  height: 60px;
}

.two {
  width: 950px;
  height: 60px;
}

#contentTwo {
  width: 100%;
  overflow: hidden;
}

#contentTwo .data_box img {

  width: 270px;
  height: 300px;
  margin-bottom: 10px;
  float: left;
}


.h {
  font-size: 16px;
}

/*normal： 正常方向  reverse： 反方向运行
                     alternate： 动画先正常运行再反方向运行，并持续交替运行 alternate-reverse： 动画先反运行再正方向运行，并持续交替运行 */
.di {
  position: relative;
  left: 20%;
  width: 800px;
  height: 100px;
  padding: 10px;
  border-radius: 61px;
  box-shadow: 10px 0 10px rgba(164, 166, 222, .8);
  background: #C3C9E8;
  background: -moz-linear-gradient(top, #fff, #C3C9E8);
  background: -webkit-linear-gradient(top, #fff, #C3C9E8);
  background: linear-gradient(to bottom, #fff, #C3C9E8);
  -moz-animation: animations 1.5s ease infinite alternate;
  -webkit-animation: animations 1.5s ease infinite alternate;
  animation: animations 1.5s ease infinite alternate;
  font-family: "楷体";
}

@-webkit-keyframes animations {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(100px, 100px);
  }
  100% {
    -webkit-transform: translate(100px, 0);
  }
}

@-moz-keyframes animations {
  0% {
    -moz-transform: translate(0, 0);
  }
  50% {
    -moz-transform: translate(100px, 100px);
  }
  100% {
    -moz-transform: translate(100px, 0);
  }
}

@keyframes animations {
  0% {
    transform: translate(0, 0);
  }
  50% {
    ransform: translate(1000px, 100px);
  }
  100% {
    transform: translate(100px, 0);
  }
}

.name { /*成员字体*/
  margin-left: -10px;
  text-align: center;
  font-family: "幼圆";
  font-size: 24px;

}

.book1 {
  text-decoration: none;
  color: black;
}

.book1:hover {
  color: #D3A8C8;
}

.li1{
  text-align: center;
  width: 200px;
}
.bjimg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  object-fit: cover;
}
</style>
